import React from 'react'
// 针对于props进行类型限制
import types from 'prop-types'
import { useHistory, Route } from 'react-router-dom'

import {Container} from './style'

// Mylink它仿 Link组件

// tag进行别名设置，因为在react组件中，首字母必面大写
const Mylink = ({ to, children, tag: Tag }) => {
  const history = useHistory()

  const goto = () => {
    history.push(to)
  }
  return (
    <Container>
      <Route
        path={to}
        children={({ match }) => {
          let activeClass = match ? 'active' : ''

          return (
            <Tag className={activeClass} onClick={goto}>
              {children}
            </Tag>
          )
        }}
      />
    </Container>
  )
}

// 针对于当前的组件对于props类型进行限制
Mylink.propTypes = {
  // 属性名：类型限制
  // to: types.oneOfType([types.string,types.object])
  // to属性必须要传入的属性，类型为字符串
  to: types.string.isRequired,
  tag: types.string
}

// 设置默认值
Mylink.defaultProps = {
  tag: 'a'
}

export default Mylink
